<template>
  <div class="container">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>发布墙</span>
        <h3>
          注意:
          <i class="el-icon-warning-outline"></i>
          网络不是法外之地,文明发言,健康冲浪
        </h3>
      </div>
      <!-- 选择类型 -->
      <div>
        <span class="hint">选择发布类型:&nbsp;</span>
        <el-radio-group v-model="selectType" size="medium">
          <el-radio-button label="0">心愿</el-radio-button>
          <el-radio-button label="1">祝福</el-radio-button>
          <el-radio-button label="2">表白</el-radio-button>
          <el-radio-button label="3">一起玩</el-radio-button>
          <el-radio-button label="4">每日分享</el-radio-button>
          <el-radio-button label="5">其他</el-radio-button>
        </el-radio-group>
      </div>
      <Pubwalls :selectType="selectType" @getDataInfo="getDataInfo"></Pubwalls>
    </el-card>
  </div>
</template>

<script>
// 引入子组件
import Pubwalls from "@/views/publish/pub_walls/index.vue";
// 引入第三方库dayjs
import dayjs from "dayjs";
export default {
  data() {
    return {
      selectType: "0", //控制显示的组件
    };
  },
  methods: {
    // 获取子组件传入数据回调
    async getDataInfo(data, formdata) {
      // 解构
      let { userinfo } = this;
      // 完善用户基本信息
      data.timer = dayjs().format("YYYY-MM-DD HH:mm:ss"); //发布时间
      data.nickname = userinfo.nickname; //发布者昵称
      data.from = userinfo.from; //发布者所在地
      data.user_pic = userinfo.user_pic; //发布者头像
      // 发送插入基本信息请求
      console.log(data,'传入值');
      console.log(this.userinfo,'vuex个人信息');
      let result = await this.$API.publish(data);
      if (result.code === 200) {
        // 再判断用户是否上传了图片
        if (formdata.length !== 0) {
          // 说明上传了图片 继续发送上传图片的请求
          this.handleformData(formdata);
        } else {
          // 没有上传图片,直接提示上传成功
          this.handleResult(result);
        }
      } else {
        this.handleResult(result);
      }
    },
    // 处理返回值函数
    handleResult(result) {
      if (result.code === 200) {
        this.$message({
          type: "success",
          message: result.message,
        });
        // 跳转首页面
        this.$router.push("/");
      } else {
        this.$message({
          type: "error",
          message: result.message,
        });
      }
    },
    // 上传照片墙函数
    async handleformData(data) {
      // new一个formdata的对象
      let formdata = new FormData();
      // 将图片添加到FormData对象中
      data.forEach((item) => {
        formdata.append("file", item.raw);
      });
      // 发送请求
      let result = await this.$API.handleformData(formdata);
      this.handleResult(result);
    },
  },
  components: {
    Pubwalls,
  },
  computed: {
    // vuex中的个人信息
    userinfo() {
      return this.$store.state.user.userinfo;
    },
  },
};
</script>

<style lang="less" scoped>
.container {
  width: 1000px;
  padding: 0 16px;
  margin: 10px auto;
  .clearfix {
    span {
      font-weight: 700;
      color: #008c8c;
    }
    h3 {
      font-size: 12px;
      color: #ff3333;
    }
  }
  .hint {
    font-weight: 700;
    color: #008c8c;
  }
  /deep/.el-radio-button__orig-radio:checked + .el-radio-button__inner {
    color: #fff;
    background-color: #008c8c;
    border-color: #008c8c;
    box-shadow: -1px 0 0 0 #008c8c;
  }
  /deep/.el-radio-button__inner:hover {
    color: #008c8c;
  }
}
</style>
